<template>
  <div class="Login">
    <div class="slide">
      <h2 style="text-align: center; margin-bottom: 40px; letter-spacing: 4px; color: rgb(63 95 200)">登录界面</h2>
      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="60px" class="demo-ruleForm">
        <el-form-item label="登录" prop="username">
          <el-input type="text" v-model="ruleForm.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pass">
          <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
          <el-button type="warning" @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      ruleForm: {
        username: '',
        pass: ''
      },
      rules: {
        username: [
          { min: 3, max: 10, message: "3-10个字符", trigger: "blur" },
          { required: true, message: "用户名必填", trigger: "blur" },
        ],
        pass: [
          { min: 6, max: 18, message: "6-18个字符", trigger: "blur" },
          { required: true, message: "密码必填", trigger: "blur" },
        ],
      }
    }
  },
  methods: {
    submitForm() {
      this.$router.push({ path: '/' })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>

<style>
body {
  margin: 0;
}
</style>

<style scoped>
.Login {
  width: 100%;
  height: 100vh;
  background: url("../assets/lgbg.png") no-repeat;
  background-size: 100% 100%;
  position: relative;
}

.slide {
  width: 410px;
  height: 315px;
  padding: 20px 50px;
  background-color: hsla(0, 0%, 100%, .2);
  box-shadow: 0 0 3px hsl(0, 0%, 50%);
  border-radius: 19px;
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 62%;
  transform: translate(0, -50%);
}

.el-button:nth-child(2){
  margin-left: 50px;
}
</style>
